'use client';

import React, { ReactNode, useEffect, useState } from 'react';
import useBreakpoint from '@/hooks/use-breakpoint';

interface SafeAreaProps {
  children: ReactNode;
  top?: boolean;
  bottom?: boolean;
  left?: boolean;
  right?: boolean;
  all?: boolean;
  className?: string;
}

/**
 * 安全区域组件，为移动设备添加安全区域边距
 * 特别是针对带有刘海、底部触控条等非矩形屏幕的设备
 */
export default function SafeArea({
  children,
  top = false,
  bottom = false,
  left = false,
  right = false,
  all = false,
  className = '',
}: SafeAreaProps) {
  const [mounted, setMounted] = useState(false);
  const { isMobile } = useBreakpoint();
  
  useEffect(() => {
    setMounted(true);
  }, []);

  // 服务器端渲染时不添加安全区域
  if (!mounted) {
    return <div className={className}>{children}</div>;
  }

  // 如果是移动设备，应用安全区域样式
  // 如果不是移动设备，则不需要安全区域
  if (!isMobile) {
    return <div className={className}>{children}</div>;
  }

  // 动态生成安全区域样式
  let safeAreaClass = className;
  
  if (all) {
    safeAreaClass += ' pt-safe pr-safe pb-safe pl-safe';
  } else {
    if (top) {
      safeAreaClass += ' pt-safe';
    }
    
    if (bottom) {
      safeAreaClass += ' pb-safe';
    }
    
    if (left) {
      safeAreaClass += ' pl-safe';
    }
    
    if (right) {
      safeAreaClass += ' pr-safe';
    }
  }
  
  return (
    <div className={safeAreaClass.trim()}>
      {children}
    </div>
  );
}

// 在全局CSS中添加以下样式
// --safe-area-top: env(safe-area-inset-top, 0px);
// --safe-area-bottom: env(safe-area-inset-bottom, 0px);
// --safe-area-left: env(safe-area-inset-left, 0px);
// --safe-area-right: env(safe-area-inset-right, 0px);
//
// .pt-safe {
//   padding-top: var(--safe-area-top);
// }
// .pb-safe {
//   padding-bottom: var(--safe-area-bottom);
// }
// .pl-safe {
//   padding-left: var(--safe-area-left);
// }
// .pr-safe {
//   padding-right: var(--safe-area-right);
// } 